<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="../assets/js/vue.js"></script>
    <title>Extends Option 扩展选项</title>
</head>

<body>
    <h1>Extends Option 扩展选项</h1>
    <hr>
    <div id="app">
        <p>${num}</p>
        <p><button @click="add">Add</button></p>
    </div>
    <script type="text/javascript">
        var extendsObj = {
            updated: function () {
                console.log('我是扩展的updated方法');
            },
            methods:{
                add: function () {
                    console.log('我是扩展出来的方法');
                    this.num++
                }
            }
        }
        var app = new Vue({
            el: '#app',
            data: {
                num: 1
            },
            methods: {
                add: function () {
                    console.log('我是原生的方法');
                    this.num++
                }
            },
            updated: function () {
                console.log('我是原生的updated的方法');
            },
            extends:extendsObj,
            delimiters:['${','}'] //现有项目与插值方式有冲突的解决方式
        });
    </script>
</body>

</html>